<template>

    <div>
        <Row  class="query-form">
            <Col span="24">
                <Button @click="reset" class="ivu-btn-reset"   >重置</Button>
            </Col>
        </Row>
        <div id="timeEcharts"></div>

    </div>

</template>


<script>
    import {Api} from '../../../../api/index.js'
    import echarts from 'echarts'
    export default {
        name: "staticsTime",

        data() {
            return {
                chart: null,
                //标题
                name: [],
                opinionData: [],
                onclick:true,
            }
        },
        mounted() {
            this.selectCertificateIssued();
        },
        methods:{
            onClick(){

            },
            selectCertificateIssued() {
                let url = Api.countActivityWork;
                this.$http.get(url+"/3").then((res) => {
                    this.name = [];
                    this.opinionData = [];
                    res.data.data.map(item => {
                        this.name.push(item.year);
                        this.opinionData.push(item.count);

                    });
                    this.drawPie();
                    let _this = this;

                    this.chart.on('click',function (param) {
                        let url = Api.countActivityWork;
                        let data = {
                            year:param.name
                        };

                        _this.$http.get(url+"/3",{params:data}).then((res) => {
                            _this.chart.clear();
                            _this.name = [];
                            _this.opinionData = [];
                            res.data.data.map(item => {
                                _this.name.push(item.month);
                                _this.opinionData.push(item.count);

                            });
                            _this.option();
                           _this.chart.off('click');
                        });



                    })
                });

            },
            drawPie() {
                this.chart = echarts.init(document.getElementById('timeEcharts'));
                this.option();

            },
            option(){
                this.chart.setOption({
                    title: {
                        text: '活动作品数量统计',
                        left: 'center',

                        textStyle: {
                            fontSize: 24,
                            fontFamily: 'Helvetica',
                            fontWeight: 400
                        }
                    },
                    tooltip: {},

                    xAxis: {
                        data: this.name,
                        axisLabel: {
                            interval: 0,

                        }

                    },
                    yAxis: {
                        name:'数量'
                    },
                    series: [{
                        name: '活动作品数量统计',
                        type: 'bar',
                        data: this.opinionData,
                    }]
                });
            },
            reset(){
                this.chart.clear();
                this.selectCertificateIssued();
            }
        }
    }
</script>

<style scoped>
    #timeEcharts {
        position: relative;
        left: 50%;
        margin-left: -400px;
        margin-bottom: 70px;
        width: 800px;
        height: 600px;
        border-radius: 10px;
    }
</style>